<template>
  <div class="app-container">
    <div class="filter-container" style="margin-top:5px; margin-bottom:16px">

      <el-select v-model="listQuery.tenantId" placeholder="租户ID" filterable clearable class="filter-item">
        <el-option v-for="item in tenantOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <el-input v-model="listQuery.itemName" placeholder="项目名称" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      &nbsp;&nbsp;&nbsp;&nbsp;
      <el-input v-model="listQuery.owner" placeholder="负责人" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      &nbsp;&nbsp;&nbsp;&nbsp;
      <el-button v-waves class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" type="primary" plain icon="el-icon-refresh" @click="handleReset">
        重置
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="success" plain icon="el-icon-edit"
        @click="handleCreate">
        新增
      </el-button>
    </div>

    <el-table :key="tableKey" v-loading="listLoading" :data="listData" stripe border fit highlight-current-row
      style="width: 100%;">
      <el-table-column label="操作栏" class-name="status-col" width="200" align="center">
        <template slot-scope="{row,$index}">
          <el-button type="info" icon="el-icon-search" circle @click="lookInfo(row.tenantId, row.itemId)"></el-button>
          <el-button type="primary" plain icon="el-icon-edit" circle @click="editInfo(row.tenantId, row.itemId)">
          </el-button>
          <el-button type="danger" slot="reference" plain icon="el-icon-delete" circle
            @click="delInfo(row.tenantId, row.itemId)"></el-button>
        </template>
      </el-table-column>

      <el-table-column label="租户ID" prop="tenantId" width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.tenantId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目ID" prop="itemId" width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.itemId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" prop="itemName" align="center" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          <span>{{ row.itemName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目介绍" prop="itemDesc" align="center" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          <span>{{ row.itemDesc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责人" prop="owner" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.owner }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="gmtCreate" width="180" align="center">
        <template slot-scope="{row}">
          <span>{{ row.gmtCreate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="修改时间" prop="gmtModified" width="180" align="center">
        <template slot-scope="{row}">
          <span>{{ row.gmtModified }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />

    <!-- 业务线创建模态框 -->
    <el-dialog :title="dialogStatus" :visible.sync="dialogFormVisible" top="50px" width="45%">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px">

        <el-form-item prop="tenantId" label="租户ID">
          <el-select v-model="temp.tenantId" placeholder="" filterable clearable class="filter-item"
                     style="width: 100%" :disabled="isLook">
            <el-option v-for="item in tenantOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
          </el-select>
        </el-form-item>

        <el-form-item prop="itemId" label="项目ID">
          <el-input v-model="temp.itemId" :disabled="isLook"></el-input>
        </el-form-item>

        <el-form-item prop="itemName" label="项目名称">
          <el-input v-model="temp.itemName" :disabled="isLook"></el-input>
        </el-form-item>

        <el-form-item prop="owner" label="负责人">
          <el-input v-model="temp.owner" :disabled="isLook"></el-input>
        </el-form-item>

        <el-form-item prop="itemDesc" label="租户介绍">
          <el-input v-model="temp.itemDesc" :rows="2" type="textarea" :disabled="isLook"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button v-if="!isLook" type="primary" @click="dialogType==='create'?createData():updateData()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
import { MessageBox, Message } from 'element-ui'
import api from '/src/api/projectApi'
import t_api from '/src/api/tenantApi'
import NewPageSelect from "../../utils/pageSelect.vue";

export default {
  name: 'ComplexTable',
  components: {
    NewPageSelect,
    Pagination },
  directives: { waves },
  filters: {
    alarmFilter (alarm) {
      if (alarm == "0") {
        return "报警";
      } else if (alarm == "1") {
        return "不报警";
      }
    }
  },
  data () {
    return {
      tableKey: 0,
      listData: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        tenantId: '',
        itemName: '',
        owner: ''
      },
      isLook: false,
      isShow: true,
      btnLoading: false,
      calendarTypeOptions: [
        { key: 1, display_name: 'ArrayBlockingQueue' },
        { key: 2, display_name: 'LinkedBlockingQueue' },
        { key: 3, display_name: 'LinkedBlockingDeque' },
        { key: 4, display_name: 'SynchronousQueue' },
        { key: 5, display_name: 'LinkedTransferQueue' },
        { key: 6, display_name: 'PriorityBlockingQueue' },
        { key: 9, display_name: 'ResizableLinkedBlockingQueue' }
      ],
      tenantOptions: [],
      projectOptions: [],
      temp: {},
      dialogFormVisible: false,
      dialogStatus: '',
      dialogType: '',
      rules: {
        tenantId: [{ required: true, message: '请选择', trigger: 'blur' }],
        itemId: [{ required: true, message: '请选择', trigger: 'blur' }],
        itemName: [{ required: true, message: '请输入', trigger: 'blur' }],
        itemDesc: [{ required: true, message: '请输入', trigger: 'blur' }],
        owner: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      selectTotal: 0,
      selectData : [],
    }
  },
  created () {
    //初始化加载
    this.getList();
    //初始化下拉框
    this.initSelect();
  },
  methods: {
    //重置查询条件
    handleReset () {
      this.listQuery = {
        tenantId: '',
        itemName: '',
        owner: ''
      };
      this.getList()
    },
    //查询项目信息列表
    getList () {
      this.listLoading = true;
      api.fetchList(this.$ajax, this.listQuery).then(rData => {
        if (rData.success) {
          //表格数据 用于表格展示
          this.listData = rData.data.records;
          //数据总数 用于分页
          this.total = rData.data.total;
        }
        this.listLoading = false;
      });
    },
    //查询项目信息列表
    handleFilter () {
      this.listQuery.page = 1;
      this.getList()
    },
    //新增项目信息模态框
    handleCreate () {
      this.dialogStatus = '新增';
      this.dialogType = 'create';
      this.temp = {};
      this.dialogFormVisible = true;
      this.isLook = false;
      this.isShow = true;
      this.btnLoading = false;
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    //查看业务线信息
    lookInfo (tenantId, itemId) {
      this.temp = {};
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      });
      //获取查看模态框所需数据
      api.queryNameSpace(this.$ajax, tenantId, itemId).then(rData => {
        if (rData.success) {
          if (rData.data == null) {
            this.message('error', '查询失败！');
            return;
          }
          this.temp = rData.data;

          this.dialogStatus = '查看';
          this.dialogType = 'look';
          this.dialogFormVisible = true;
          this.isLook = true;
          this.isShow = true;
        }
        this.listLoading = false;
      }).catch(rData => {
        this.listLoading = false;
        this.message('error', rData.message);
      });
    },

    //编辑业务线信息
    editInfo (tenantId, itemId) {
      this.temp = {};
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      });
      //获取编辑模态框所需数据
      api.queryNameSpace(this.$ajax, tenantId, itemId).then(rData => {
        if (rData.success) {
          if (rData.data == null) {
            this.message('error', '查询失败！');
            return;
          }
          this.temp = rData.data;

          this.dialogStatus = '编辑';
          this.dialogType = 'edit';
          this.dialogFormVisible = true;
          this.btnLoading = false;
          this.isLook = false;
          this.isShow = false;
        }
        this.listLoading = false;
      }).catch(rData => {
        this.listLoading = false;
        this.message('error', rData.message);
      });
    },

    //弹框信息
    message (type, message) {
      this.$message({
        type: type,
        message: message
      });
    },

    //保存项目信息
    createData () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          api.createData(this.$ajax, this.temp).then(() => {
            //关闭模态框
            this.dialogFormVisible = false;
            this.btnLoading = false;
            this.getList();//刷新表格
            this.message('success', '保存成功！');
          }).catch(rData => {
            this.btnLoading = false;
            this.message('error', rData.message);
          });
        }
      })
    },

    //修改项目信息
    updateData () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          api.updateData(this.$ajax, this.temp).then(() => {
            //关闭模态框
            this.dialogFormVisible = false;
            this.btnLoading = false;
            this.getList();//刷新表格
            this.message('success', '保存成功！');
          }).catch(rData => {
            this.btnLoading = false;
            this.message('error', rData.message);
          });
        }
      })
    },
    //删除项目信息
    delInfo (tenantId, itemId) {
      MessageBox.confirm('此操作不可逆，确认要删除吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleteData(this.$ajax, tenantId, itemId).then(() => {
          //关闭模态框
          this.dialogFormVisible = false;
          this.getList();//刷新表格
          this.message('success', '删除成功！');
        }).catch(rData => {
          this.message('error', rData.message);
        })
      })
    },

    initSelect : function () {
      //初始化租户ID下拉框
      t_api.fetchList(this.$ajax, {}).then(rData => {
        if (rData.success) {
          var data = rData.data.records;
          for (var i = 0; i < data.length; i++) {
            this.tenantOptions.push({key: data[i].tenantId, display_name: data[i].tenantId});
          }
        }
      });
    },
  }
}
</script>
